<!-- 商品管理 -->
<template>
	<view class="box">
		<view class="top-box">
			<view class="search-box">
				<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @input="input" cancelButton="none"
					radius="60" bgColor="#F7F7F7" placeholder="搜索商品名称~">
				</uni-search-bar>
			</view>
			<view class="top-list">
				<view class="tab-1" :class="topIndex==index?'tab-1-active':''" v-for="(item,index) in topList"
					:key="index" @click="topListClick(index)">{{item}}</view>
			</view>
		</view>
		<view class="goods-list-box">
			<view class="order-list-1" v-for="(item,index) in list" :key="index">
				<image class="order-list-1-subscript" :src="`${picUrl}/jh/hot-icon.png`"></image>
				<view class="order-list-2">
					<view class="order-list-icon">
						<image :src="item.goods_image"></image>
					</view>
					<view class="order-info">
						<view class="order-name">{{item.gc_name}}</view>
						<view class="order-text">
							<view class="order-price">{{'¥'+item.goods_price}}</view>
						</view>
						<view class="order-text2">
							<view class="order-count">库存：{{item.sum}}</view>
							<view class="order-num">销量：{{item.salenum}}</view>
						</view>
					</view>
				</view>
				<view class="order-list-but">
					<view v-if="item.goods_state==10">
						<text style="color: red;">该商品违规下架，请去pc端操作</text>
					</view>
					<view class="grounding" v-if="item.goods_state==0" @click="handle(item.goods_commonid,'show')">
						<image :src="`${picUrl}/jh/grounding.png`"></image>上架
					</view>
					<view class="grounding" v-if="item.goods_state==1" @click="handle(item.goods_commonid,'unshow')">
						<image :src="`${picUrl}/jh/unshow.png`"></image>下架
					</view>
					<view class="delete" v-if="item.goods_state!=10" @click="handle(item.goods_commonid,'drop')">
						<image :src="`${picUrl}/jh/del.png`"></image>删除
					</view>
				</view>
			</view>
		</view>
		<Tabber :tabtag="1"></Tabber>
	</view>
</template>

<script>
	import Tabber from "@/SupplyEnd/taber/comnpontents/tabber.vue"
	export default {
		components: {
			Tabber
		},
		data() {
			return {
				topIndex: 0,
				topList: ["全部", "上架中", "仓库中"],
				searchValue: '',
				list: [],
				state: 0, //状态
				goods_name: "", //商品名称
				curpage: 1, //页码
				hasmore: false, //是否有下一页
			}
		},
		onReady() {
			this.getGoodList()
		},
		onLoad(){
			console.log(`${this.picURL}`)
		},
		methods: {
			search(res) { //搜索商品
				this.hasmore = true
				if (res != undefined) {
					this.searchValue = res.value
				}
				this.list = []
				this.curpage = 1
				this.goods_name = this.searchValue
				this.getGoodList()
			},
			input(res) {

				if (res == "") {
					this.curpage = 1
					this.goods_name = ""
					this.list = []
					this.getGoodList()
				}
			},
			getGoodList() { //获取商品列表
				let url = '';
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/SupplyEnd/login/login",
					});
				}
				url = "/mobile/index.php?act=supplier-goods&op=index";
				let that = this
				this.$util.request({
					url: url,
					method: 'get',
					data: {
						state: that.state,
						goods_name: that.goods_name,
						curpage: that.curpage
					}
				}).then(res => {
					if (res.error_code == 0) {
						//更新页面数据
						that.list = that.list.concat(res.datas.list)
						that.hasmore = res.datas.paged.hasmore
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			handle(id, string) { //商品操作
				let url = '';
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/SupplyEnd/login/login",
					});
				}
				let text = ''
				switch (string) { //顶部导航栏切换
					case 'show':
						text = "上架"
						break;
					case 'unshow':
						text = "下架"
						break;
					case 'drop':
						text = "删除"
						break;
				}
				let that = this
				uni.showModal({
					content: `你确认要${text}该商品吗？`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							url = "/mobile/index.php?act=supplier-goods&op=handle";
							that.$util.request({
								url: url,
								method: 'post',
								data: {
									goods_commonid: id,
									type: string
								}
							}).then(res => {
								if (res.error_code == 0) {
									that.list = []
									//更新页面数据
									setTimeout(() => {
										that.getGoodList()
										that.$set(that.list)
									}, 200)
									console.log('操作成功')
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			topListClick(index) { //点击筛选
				let that = this
				if (index != undefined) { //清空上一轮数据
					that.curpage = 1
					that.list = []
					that.topIndex = index
				}
				switch (that.topIndex) { //顶部导航栏切换
					case 0:
						that.state = 0
						break;
					case 1:
						that.state = 1
						break;
					case 2:
						that.state = 2
						break;
				}
				this.getGoodList()
			},
		},
		onReachBottom() { //下拉加载
			if (this.hasmore == true) {
				uni.showLoading({
					title: "加载中"
				})
				this.curpage++
				this.getGoodList()
			} else {
				uni.showLoading({
					title: "没有更多数据了",
					icon: "none",
					duration: 1000
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		onBackPress() {
			// #ifdef APP-PLUS
			// plus.key.hideSoftKeybord();
			uni.navigateTo({
				url: "/SupplyEnd/taber/home"
			})
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;
	}

	.top-box {
		position: fixed;
		top: 82rpx;
		/* #ifndef H5 */
		top: 0rpx;
		/* #endif */
		left: 0;
		right: 0;
		background: #FFFFFF;
		z-index: 99;

		.search-box {
			background: #FFFFFF;
		}

		.top-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 44rpx;

			.tab-1 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.tab-1-active {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #E96A1D;
				position: relative;
			}

			.tab-1-active::after {
				position: absolute;
				bottom: -4rpx;
				left: 20%;
				right: 20%;
				height: 2rpx;
				content: '';
				background: #E96A1D;
				border-radius: 6rpx;
			}
		}
	}


	.goods-list-box {
		padding: 240rpx 30rpx 30rpx;

		.order-list-1 {
			background-color: #FFF;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			position: relative;
			margin-bottom: 30rpx;

			.order-list-1-subscript {
				width: 130rpx;
				height: 130rpx;

				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
			}

			.order-list-info {
				display: flex;
				justify-content: space-between;

				.order-shopname {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
					display: flex;
					flex-direction: row;
					align-items: center;

					.shop-icon {
						width: 38rpx;
						height: 38rpx;
						background: linear-gradient(180deg, #EA8C1E 0%, #E84A1D 100%);
						opacity: 1;

						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;

						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						margin-right: 10rpx;

						text {
							transform: scale(0.8);
							font-family: 500;
						}
					}
				}

				.order-time {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.order-list-2 {
				display: flex;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #EEEEEE;

				.order-list-icon {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 5rpx;
					}
				}

				.order-info {
					margin-left: 30rpx;
					position: relative;

					.order-name {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #323232;
					}

					.order-text {
						position: absolute;
						bottom: 43rpx;
						left: 0;
						right: 0;
						display: flex;
						align-items: center;

						.order-price {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #E96A1D;
						}

						.order-score {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #909090;
						}

						/deep/ .uni-rate {
							margin-top: 10rpx;
						}

						.order-score-icon {
							display: flex;
							align-items: center;
						}
					}

					.order-text2 {
						width: 400rpx;
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.order-count {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}

						.order-num {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}
					}
				}
			}
		}

		.order-list-but {
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.grounding {
				margin-right: 350rpx;
				display: flex;
				width: 140rpx;
				height: 60rpx;
				background: #F7F7F7;
				border-radius: 50rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.delete {
				width: 140rpx;
				height: 60rpx;
				background: #F7F7F7;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #909090;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>